import React from 'react'
import ReactDom from 'react-dom'
import {Map,Markers,InfoWindow } from 'react-amap'
import './index.less'
import axios from '../../axios/index'
import { Icon,Flex ,NavBar} from 'antd-mobile';
const amapkey="75f47abd58d4983c07b4c18d7514ed9f";

export default class AMap extends React.Component{

  state = {
    markers: '',
    center: '',
    curVisibleWindow: false,
    posStr:'',
    pos:'',
    title:'测试标题',
    contact:'测试姓名',
    imagePath:'../uploadImg/车大大.jpg',
    tel:'13386170911',
    address:'测试地址',
    note:'测试备注',
    marker:''
   
  }
  constructor(){
    super();
    let _this=this;
    this.markersEvents = {
      click(e, marker){
        // 通过高德原生提供的 getExtData 方法获取原始数据
        const extData = marker.getExtData();
        const index = extData.myIndex;
        console.log('extData:',extData.position);
        // alert(`点击的是第${index}号坐标点`);
        _this.setState({
          curVisibleWindow:true,
          pos:extData.position,
          title:extData.title,
          contact:extData.contact,
          imagePath:extData.imagePath,
          tel:extData.tel,
          address:extData.address,
          note:extData.note,
          marker:marker,
          posStr:extData.posStr
        });
      }
    }
  }
  componentWillMount(){
    this.requestList();
  }   
   //请求markers列表
   requestList=()=>{
    axios.ajax({
      // url:'/map/list',
      url:'/api/v1/vas/shop',
      method:'get',
      data:{}
    }).then((res)=>{
      if(res){    
        console.log('data::',res.data);    
        this.setState({
          markers:this.randomMarker(res.data)
        })
      }else{
        this.randomMarker('ssss');
      }
    })
  }
  randomMarker = (res) => (
    res.map((e, idx) => ({      
      posStr:e.position,
      position: this.randomPosition(e.position==null?[0,0]:e.position.split(",")),
      myIndex:idx,
      myLabel:idx,
      title:e.name,
      contact:e.contact,
      imagePath:e.imagePath,
      tel:e.tel,
      address:e.address,
      note:e.note
    }))
  ); 
  randomPosition =function (data,pos){
    console.log('randomPositiondata:',data);  
    return{
      longitude: data[0],
      latitude: data[1]
    }  
  }
  renderMarker=(extData)=>{
    return <div style={{backgroundColor:'red',height:'30px',width:'30px',color:'#fff', textAlign:'center',lineHeight:'30px'}}>{extData.myLabel}</div>
  }
  
  openMaps=()=>{
    this.state.marker.markOnAMAP({
      name:this.state.title,
      position:this.state.posStr
    })
  }
  iwEvents={
    close:()=>{
      this.setState({
        curVisibleWindow:!this.state.curVisibleWindow
      });
    }
  }
    render(){     
      const plugins = [
        'MapType',
        'Scale',
        'OverView',
        'ControlBar', // v1.1.0 新增
        {
          name: 'ToolBar',
          options: {
            autoPosition:true,
            visible: true,  // 不设置该属性默认就是 true
            onCreated(ins){
              // console.log('create：',ins);
            },
          },
        }
      ]
     
        return(
            <div id='amap'>
             <NavBar
                    mode="light"
                    leftContent="返回"
                    icon={<Icon type="left" />}
                    onLeftClick={() =>{
                        const {history}=this.props;
                        history.push({pathname:'/mine'});
                    }}
                    rightContent={[
                        <Icon key="1" type="ellipsis" />,
                    ]}
                >服务网点</NavBar>
                <div>
                    <select>
                      <option>距离筛选</option>
                      <option>200米</option>
                      <option>300米</option>
                      <option>400米</option>
                    </select>  
                </div>
                <Map 
                    plugins={plugins}
                    amapkey={amapkey}
                    zoom={6}  
                    useAMapUI
                >
                    <Markers 
                      markers={this.state.markers}
                      render={this.renderMarker}
                      events={this.markersEvents}                
                    />
                     <InfoWindow
                      position={this.state.pos}
                      visible={this.state.curVisibleWindow}
                      isCustom={false}//不使用自定义窗体
                      events={this.iwEvents}
                    >
                        <div style={{fontSize:'16px',fontWeight:'bolder'}}>
                          <div>{this.state.title}</div>
                        </div>
                        <div style={{backgroundColor:'white'}}>
                          <img src="http://tpc.googlesyndication.com/simgad/5843493769827749134" />
                          <p>地址：{this.state.address}</p>
                          <p>联系人：{this.state.contact}</p>
                          <p>电话：{this.state.tel}</p>
                          <p>{this.state.note}</p>
                          <a href="#" onClick={() => {this.openMaps()}}>详细信息</a>
                        </div>
                   
                    </InfoWindow>
                </Map>
            </div>
        );
    }
}